.blur {
	backdrop-filter: blur(5px);
	background-color: rgba(0, 0, 0, 0.3);
}
// 溢出隐藏。
.overflow {
	overflow: hidden;
}

.overflow-x {
	overflow-x: hidden;
	overflow-y: auto;
}
.overflow-y {
	overflow-x: auto;
	overflow-y: hidden;
}

$v_position: (
	relative: relative,
	absolute: absolute,
	fixed: fixed,
	sticky: sticky
);
@each $name, $key in $v_position {
	.#{$name} {
		position: $key !important;
	}
}

.fulled-height {
	display: flex;
	align-items: stretch;
}
//清除浮动

.clear {
	clear: both;
}
.fulled {
	width: 100%;
	display: block;
}
.fulled-height {
	height: 100%;
	display: block;
}
.gray-100 {
	filter: grayscale(100%);
}
.gray {
	filter: grayscale(25%);
}
.d-inline-block {
	display: inline-block !important;
}
.d-block {
	display: block;
}
// 元素内联对齐 。vertical-align:top,middle,bottom
@each $name, $key in (top: top, middle: middle, bottom: bottom) {
	.vertical-align-#{$name} {
		vertical-align: $key;
	}
}
.wrap {
	white-space: pre-wrap;
	word-break: break-all;
}
.nowrap {
	white-space: nowrap;
}
// 元素内联对齐 。vertical-align:top,middle,bottom
@each $name, $key in (top: top, middle: middle, bottom: bottom) {
	.vertical-align-#{$name} {
		vertical-align: $key;
	}
}

@for $i from 0 through 26 {
	.zIndex-#{$i} {
		z-index: #{$i * 1};
	}
	.zIndex-n#{$i} {
		z-index: #{$i * 4};
	}
}

// 文本缩略。

@mixin text-overflow($width: 100%, $display: block, $space: nowrap) {
	width: $width;
	display: $display;
	white-space: $space;
	overflow: hidden;
}

.text-overflow {
	@include text-overflow();
}
// 多行文本缩略。text-overflow-行：数字
@for $i from 1 to 5 {
	.text-overflow-#{$i} {
		@include text-overflow(100%, -webkit-box, inherit);
		-webkit-line-clamp: $i;
		-webkit-box-orient: vertical;
	}
}

/* #ifdef APP-PLUS-NVUE */
.text-overflow {
	text-overflow: ellipsis;
}
// 多行文本缩略。text-overflow-行：数字
@for $i from 1 to 5 {
	.text-overflow-#{$i} {
		text-overflow: ellipsis;
		lines: $i;
	}
}
.wrap {
	word-wrap: break-word;
}

// 删除线.
.text-delete {
	text-decoration: line-through;
}
// 下划线
.text-underline {
	text-decoration: underline;
}
// 文本大小 。text-size-xs大小名称,xxs,xs,s,n,g,lg,xl
@each $name, $key in (xxs: 12px, xs: 13px, s: 13px, m: 14px, n: 16px, g: 18px, lg: 20px, xl: 24px) {
	/* #ifdef H5*/
	.text-size-#{$name} {
		font-size: $key;
		span {
			font-size: $key;
		}
	}
	
	/* #ifndef H5*/
	.text-size-#{$name} {
		font-size: $key;
	}
	
}
// 文本加粗text-weight-s,n,b
@each $name, $key in (s: 100, n: 400, b: 700) {
	.text-weight-#{$name} {
		font-weight: $key;
	}
}
// 文本对齐 。text-align-left,right,center
@each $name, $key in (left: left, right: right, center: center) {
	.text-align-#{$name} {
		text-align: $key;
	}
}

// 圆角半径
// 从0-100的圆角round-数字
@for $i from 0 through 26 {
	.round-#{$i} {
		border-radius: #{$i}px !important;
	}
}
// 圆角说明 round-方向-大小。
// tl，顶左，tr顶右。bt底左，br底右。a全部。t:顶左和顶右，b:底左和底右，l:顶左和底左，r:顶右，底右。
@each $name, $key in (tl: 'tl', tr: 'tr', bl: 'bl', br: 'br', a: 'a', t: 't', b: 'b', l: 'l', r: 'r') {
	@for $i from 0 to 50 {
		.round-#{$name}-#{$i} {
			@if $key== 'tl' {
				border-top-left-radius: #{$i}px !important;
			}
			@if $key== 'tr' {
				border-top-right-radius: #{$i}px !important;
			}
			@if $key== 'bl' {
				border-bottom-left-radius: #{$i}px !important;
			}
			@if $key== 'br' {
				border-bottom-right-radius: #{$i}px !important;
			}
			@if $key== 't' {
				border-top-left-radius: #{$i}px !important;
				border-top-right-radius: #{$i}px !important;
			}
			@if $key== 'b' {
				border-bottom-left-radius: #{$i}px !important;
				border-bottom-right-radius: #{$i}px !important;
			}
			@if $key== 'l' {
				border-top-left-radius: #{$i}px !important;
				border-bottom-left-radius: #{$i}px !important;
			}
			@if $key== 'r' {
				border-top-right-radius: #{$i}px !important;
				border-bottom-right-radius: #{$i}px !important;
			}
			@if $key== 'a' {
				border-radius: #{$i}px !important;
			}
		}
	}
}
// 50%的半圆角rounded圆角50%
.rounded {
	border-radius: 50% !important;
}
// 透明度opacity-[1-10]
@for $i from 0 to 11 {
	.opacity-#{$i} {
		@if $i>0 and $i<10 {
			opacity: $i / 10;
		}
		@if $i==0 {
			opacity: 0;
		}
		@if $i==10 {
			opacity: 1;
		}
	}
}


.shadow {
	box-shadow: 0 2px 8px rgba($color: rgba(0, 0, 0, 1), $alpha: 0.08);
}
@for $i from 0 to 26 {
	.shadow-#{$i} {
		box-shadow: 0 #{$i}px #{$i+5}px rgba($color: rgba(0, 0, 0, 1), $alpha: 0.08);
	}
}


// 添加边线 最大5
@for $i from 0 to 6 {
	@if $i==0 {
		.border-0 {
			border: solid 0px #f5f5f5 !important;
		}
		.border-0-bk {
			border: solid 0px #282828 !important;
		}
		.border {
			border: solid 1px #f5f5f5 !important;
		}
		.border-bk {
			border: solid 1px #282828 !important;
		}
	}
	@if $i>0 {
		.border-#{$i} {
			border: solid #{$i}px #f5f5f5 !important;
		}
		.border-#{$i}-bk {
			border: solid #{$i}px #f5f5f5 !important;
		}
	}
}
// 边线格式1：border-方向t,r,l,b-宽度
@each $name, $key in (l: 'left', r: 'right', t: 'top', b: 'bottom', a: 'a') {
	@for $i from 1 to 6 {
		.border-#{$name}-#{$i} {
			@if $key== 'a' {
				border: solid #{$i}px opacify($color: #f5f5f5, $amount: 1) !important;
			}
			@if $key!= 'a' {
				border-#{$key}: solid #{$i}px opacify($color: #f5f5f5, $amount: 1) !important;
			}
		}
		.border-#{$name}-#{$i}-bk {
			@if $key== 'a' {
				border: solid #{$i}px rgba($color: #282828, $alpha: 1) !important;
			}
			@if $key!= 'a' {
				border-#{$key}: solid #{$i}px rgba($color: #282828, $alpha: 1) !important;
			}
		}
	}
}

// 内间距。p[a,t,r,b,l,x,y]如：pa表示所有边距，px:左右，py:上下,pr:右边距
@each $name, $key in (a: 'padding', t: 'padding-top', r: 'padding-right', b: 'padding-bottom', l: 'padding-left', x: 'x', y: 'y') {
	@for $i from 0 to 51 {
		@if $key!= 'x' and $key!= 'y' {
			.p#{$name}-#{$i} {
				#{$key}: #{$i}px;
			}
		}
		@if $key== 'x' {
			.px-#{$i} {
				padding-left: #{$i}px;
				padding-right: #{$i}px;
			}
		}
		@if $key== 'y' {
			.py-#{$i} {
				padding-top: #{$i}px;
				padding-bottom: #{$i}px;
			}
		}
	}
	@for $i from 1 to 26 {
		@if $key!= 'x' and $key!= 'y' {
			.p#{$name}-n#{$i} {
				#{$key}: #{$i * 4}px;
			}
		}
		@if $key== 'x' {
			.px-n#{$i} {
				padding-left: #{$i * 4}px;
				padding-right: #{$i * 4}rpx;
			}
		}
		@if $key== 'y' {
			.py-n#{$i} {
				padding-top: #{$i * 4}px;
				padding-bottom: #{$i * 4}px;
			}
		}
	}
}
// 外间距。m[a,t,r,b,l,x,y]如：ma表示所有外边距，mx:左右，my:上下,mr:右边距
@each $name, $key in (a: 'margin', t: 'margin-top', r: 'margin-right', b: 'margin-bottom', l: 'margin-left', x: 'x', y: 'y') {
	@for $i from 0 to 51 {
		@if $key!= 'x' and $key!= 'y' {
			.m#{$name}-#{$i} {
				#{$key}: #{$i}px;
			}
			@if $key!= 'margin' {
				.m#{$name}--#{$i} {
					#{$key}: -#{$i}px;
				}
			}
		}
		@if $key== 'x' {
			.mx-#{$i} {
				margin-left: #{$i}px;
				margin-right: #{$i}px;
			}
		}
		@if $key== 'y' {
			.my-#{$i} {
				margin-top: #{$i}px;
				margin-bottom: #{$i}px;
			}
		}
	}
	@for $i from 1 to 26 {
		@if $key!= 'x' and $key!= 'y' {
			.m#{$name}-n#{$i} {
				#{$key}: #{$i * 4}px;
			}
			@if $key!= 'margin' {
				.m#{$name}--n#{$i} {
					#{$key}: -#{$i * 4}px;
				}
			}
		}
		@if $key== 'x' {
			.mx-n#{$i} {
				margin-left: #{$i * 4}px;
				margin-right: #{$i * 4}px;
			}
		}
		@if $key== 'y' {
			.my-n#{$i} {
				margin-top: #{$i * 4}px;
				margin-bottom: #{$i * 4}px;
			}
		}
	}
}
// 位置。
@each $name, $key in (t: 'top', r: 'right', b: 'bottom', l: 'left') {
	@for $i from 0 to 51 {
		.#{$name}-#{$i} {
			#{$key}: #{$i}px;
		}
		.#{$name}--#{$i} {
			#{$key}: -#{$i}px;
		}
	}
	@for $i from 1 to 26 {
		.#{$name}-n#{$i} {
			#{$key}: #{$i * 4}px;
		}
		.#{$name}--n#{$i} {
			#{$key}: -#{$i * 4}px;
		}
	}
}

// Flex辅助。
@mixin dsplay-flex($justify, $items, $content) {
	justify-content: $justify !important;
	align-items: $items !important;
	
	align-content: $content;
	
	
	display: flex !important;
}
// 布局。flex-top-start,flex-top-center,flex-top-end,flex-start,flex-end,flex-center,flex-between,flex-around
// flex-end-left,flex-end-center,flex-end-right
.flex {
	display: flex !important;
}



.flex-col {
	flex-direction: column !important;
	display: flex !important;
}
.flex-wrap {
	flex-flow: row wrap !important;
	display: flex !important;
}

.flex-shrink {
	flex-shrink: 0 !important;
	display: flex !important;
}

.flex-row {
	flex-direction: row !important;
	display: flex !important;
}
.flex-reverse {
	flex-direction: row-reverse !important;
	display: flex !important;
}








//居上中对齐
.flex-top-center {
	@include dsplay-flex(center, flex-start, flex-start);
}
//居上右对齐
.flex-top-end {
	@include dsplay-flex(flex-end, flex-start, flex-start);
}


// 左对齐
.flex-start {
	@include dsplay-flex(flex-start, center, center);
}
// 右对齐
.flex-end {
	@include dsplay-flex(flex-end, center, center);
}
// 上下左右居中对齐
.flex-center {
	@include dsplay-flex(center, center, center);
}
// 两端对齐
.flex-between {
	@include dsplay-flex(space-between, center, center);
}
// 居中等分对齐
.flex-around {
	@include dsplay-flex(space-around, center, center);
}
// 居中左底对齐
.flex-end-left {
	@include dsplay-flex(flex-end, flex-start, center);
}
// 居中底部对齐
.flex-end-center {
	@include dsplay-flex(flex-end, center, center);
}
// 居中底部对齐
.flex-end-right {
	@include dsplay-flex(flex-end, flex-end, flex-end);
}
@for $i from 0 through 12 {
	.flex-#{$i} {
		flex: $i !important;
		
		flex-grow: $i !important;
		
	}
}
.flex-start-top{
	@include dsplay-flex(flex-start, flex-start, flex-start);
}
.flex-start-center{
	@include dsplay-flex(flex-start, center, center);
}
.flex-start-end{
	@include dsplay-flex(flex-start, flex-end, flex-end);
}


//以下是项目的上中下
// 居上左对齐
.flex-item-top-start {
	@include dsplay-flex(flex-start, flex-start, flex-start);
}
//居上中对齐
.flex-item-top-center {
	@include dsplay-flex(center, flex-start, flex-start);
}
//居上右对齐
.flex-item-top-end {
	@include dsplay-flex(flex-end, flex-start, flex-start);
}
// 居中左对齐
.flex-item-center-start {
	@include dsplay-flex(flex-start, center, center);
}
// 居中
.flex-item-center-center {
	@include dsplay-flex(center, center, center);
}
// 居中右对齐
.flex-item-center-center {
	@include dsplay-flex(flex-end, center, center);
}

// 居下左对齐
.flex-item-end-start {
	@include dsplay-flex(flex-start, flex-end, center);
}
//居下中对齐
.flex-item-end-center {
	@include dsplay-flex(center, flex-end, center);
}
//居下右对齐
.flex-item-top-end {
	@include dsplay-flex(flex-end, flex-end, center);
}


$colorsDefault: (
	'grey': #9e9e9e,
	'black': #000000,
	'white': #ffffff,
	'lighten-5': #fafafa,
	'lighten-4': #f5f5f5,
	'lighten-3': #eeeeee,
	'lighten-2': #e0e0e0,
	'lighten-1': #bdbdbd,
	'darken-1': #757575,
	'darken-2': #616161,
	'darken-3': #424242,
	'darken-4': #212121,
	'darken-5': #131313,
	'darken-6': #0a0a0a
);
$colors: (
	'red': #f44336,
	'pink': #e91e63,
	'purple': #9c27b0,
	'deep-purple': #673ab7,
	'indigo': #3f51b5,
	'blue': #2196f3,
	'light-blue': #03a9f4,
	'cyan': #00bcd4,
	'teal': #009688,
	'green': #4caf50,
	'light-green': #8bc34a,
	'lime': #cddc39,
	'yellow': #ffeb3b,
	'amber': #ffc107,
	'orange': #ff9800,
	'deep-orange': #ff5722,
	'brown': #795548,
	'blue-grey': #607d8b
);
// 文本颜色。text-颜色名
@each $name, $color in $colors {
	.text-#{$name} {
		color: $color !important;
	}
	.#{$name}{
		background-color: $color;
	}
}
@each $name, $color in $colorsDefault {
	.text-#{$name} {
		color: $color !important;
	}
	.#{$name}{
		background-color: $color;
	}
}